<template>
	<view>
		<!-- <scroll-view class="scroller" scroll-y="true" scroll-with-animation="true"> -->
		<!-- <uni-section style="background-color: aqua;margin-top: 0px;" :title="compilation.title" type="line"> -->
		<uni-card margin="0px" style="background-color: aqua;padding:0px 0px  20px;margin-top: 0px;   border: 0px ;"
			padding="0px">
			<image slot='cover' style="width: 100%;" :src="compilation.coverImage"></image>
			<view slot="actions" style="padding-bottom: 0em;text-indent: 2em;font-size: 15px;margin: 10px;">
				{{compilation.descri}}
			</view>
		</uni-card>
		<!-- </uni-section> -->
		<!-- 段落索引 -->
		<view v-if="false" class='cell-group margin-cell-group right-img'>
			<view class='cell-item fui-list__item' v-for="(item, index) in chapterList" :key="index">
				<view class='cell-item-hd' @click="navigateToHandle('chapter_'+item.id)">
					<view class='cell-hd-title'>第{{index+1}}章 {{ item.chapterName }}</view>
				</view>
				<!-- <view class="badge">{{ item.noteList.length }}</view> -->
				<view class='cell-item-ft'>
					<image class='cell-ft-next icon' src='/static/image/right.png'></image>
				</view>
				<!-- 数字角标 -->
				<fui-badge :value="item.noteList.length" type="danger"></fui-badge>
			</view>
		</view>
		<!-- 正文的索引 -->
		<uni-collapse ref="collapse" v-model="value">
			<uni-collapse-item v-for="(item, index) in chapterList" :key="index">
				<view slot="title" class="cell-item fui-list__item">
					<view class='cell-item-hd '>
						<view class='cell-hd-title'>第{{index+1}}章 {{ item.chapterName }}</view>
					</view>
					<!-- 数字角标 -->
					<fui-badge right="0rpx" :value="item.noteList.length" type="danger"></fui-badge>
					<view class='cell-item-ft' style="background-color: #55ff7f;"  @click="navigateToHandle('chapter_'+item.id)" @click.stop>
						<image class='cell-ft-next icon' src='/static/image/right.png'></image>
					</view>
				</view>
				<!-- 小标题 -->
				<view class='cell-item-min ' v-for="(step, noteIndex) in item.noteList" :key="noteIndex">
					<view class='cell-item-hd-min'>
						<view class='cell-hd-title'> {{noteIndex+1}} 、 {{ step.note.title }}</view>
					</view>
					<!-- 右边的箭头 -->
					<view class='cell-item-ft' style="background-color: #5500ff;"   @click="navigateToHandle('step_'+step.id )" @click.stop    >
						<image class='cell-ft-next icon' src='/static/image/right.png'></image>
					</view>
				</view>
			</uni-collapse-item>
			<!-- 附加目录的索引 -->
			<uni-collapse-item >
				<view slot="title" class="cell-item fui-list__item">
					<view class='cell-item-hd '>
						<view class='cell-hd-title'>附录:看看还有什么~~~</view>
					</view>
					<!-- 数字角标 -->
					<fui-badge right="0rpx" :value="notQuoteNotes.length" type="danger"></fui-badge>
					<view class='cell-item-ft' style="background-color: #55ff7f;"  @click="navigateToHandle('chapter_0')" @click.stop>
						<image class='cell-ft-next icon' src='/static/image/right.png'></image>
					</view>
				</view>
				<!-- 小标题 -->
				<view class='cell-item-min ' v-for="(step, noteIndex) in notQuoteNotes" :key="noteIndex">
					<view class='cell-item-hd-min'>
						<view class='cell-hd-title'> {{noteIndex+1}} 、 {{ step.note.title }}</view>
					</view>
					<!-- 右边的箭头 -->
					<view class='cell-item-ft' style="background-color: #00ff00;"   @click="navigateToHandle('step_'+step.id )" @click.stop    >
						<image class='cell-ft-next icon' src='/static/image/right.png'></image>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<!-- 正文 -->
		<uni-section :id="'chapter_'+chapter.id" :title="chapter.chapterName" type="line"
			v-for="(chapter ,index) of chapterList" style="padding: 10px;margin-top: 0px;" backgroundColor="#ff007f">
			<NoteCard :id="'step_'+step.id" v-for="(step,index) of chapter.noteList" :step="step" :index="index+1"> </NoteCard>
		</uni-section>
		<uni-section id="chapter_0" title="看看还有什么" type="line" style="padding: 10px;" backgroundColor="#ff007f">
			<NoteCard :id="'step_'+step.id"  v-for="(step,index) of notQuoteNotes" :step="step" :index="index+1"> </NoteCard>
		</uni-section>
		<view class="container">
			<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger" @fabClick="fabClick" />
		</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import NoteCard from "@/pages/compilation/compilationDetail/NoteCard.vue"
	import fuiBadge from "@/components/firstui/fui-badge/fui-badge.vue"
	import {
		Base64
	} from 'js-base64';
	import {
		fileBaseUrl
	} from '@/config/config.js';
	export default {
		components: {
			NoteCard,
			fuiBadge
		},
		data() {
			return {
				compilationId: null,
				compilation: {},
				chapters: [],
				chapterList: [],
				notQuoteNotes: [],
				title: 'uni-fab',
				horizontal: 'left', //水平对齐方式。left:左对齐，right：右对齐
				vertical: 'top', //垂直对齐方式。bottom:下对齐，top：上对齐
				direction: 'vertical', //垂直对齐方式。bottom:下对齐，top：上对齐
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
				content: [{
					iconPath: '/static/image.png',
					selectedIconPath: '/static/image-active.png',
					text: '回顾',
					active: false
				}, {
					iconPath: '',
					selectedIconPath: '',
					text: '',
					active: false
				}],
				value: ['0'],
				accordionVal: '1',
				extraIcon: {
					color: '#4cd964',
					size: '26',
					type: 'image'
				},
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.compilationId = option.compilationId
			// 获取这个合集的详细信息
			this.$api.getCompilationById(this.compilationId).then(res => {
				this.compilation = res.data
				if (this.compilation.coverImage) {
					this.compilation.coverImage = fileBaseUrl + this.compilation.coverImage
				}
				uni.setNavigationBarTitle({
					title: this.compilation.title
				});
				console.info(this.compilation)
			})
			//获取这个合集的段落
			this.$api.getNoteChapterList({
				"compilationId": option.compilationId,
				"pageSize": 999999
			}).then(res => {
				this.chapters = res.rows
			});
		},
		created() {
			let _this = this
			setTimeout(function() {
				_this.getListChapter()
			}, 500);

		},
		methods: {
			trigger(e) {
				console.log(e)
				this.content[e.index].active = !e.item.active
				// uni.showModal({
				// 	title: '提示',
				// 	content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			console.log('用户点击确定')
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消')
				// 		}
				// 	}
				// })
				if(e.item.active){
					console.log('点击了的跳转到回顾')
					uni.navigateTo({
						url: '/pages/question/index/anser/anser?compilationId='+this.compilationId,
						fail: function(e){
							console.log(e)
						}
					})
				}
			},
			fabClick() {
				uni.showToast({
					title: '点击了悬浮按钮',
					icon: 'none'
				})
			},
			switchBtn(hor, ver) {
				if (hor === 0) {
					this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
					this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
				} else {
					this.horizontal = hor
					this.vertical = ver
				}
				this.$forceUpdate()
			},
			switchColor() {
				this.is_color_type = !this.is_color_type
				if (this.is_color_type) {
					this.pattern.iconColor = '#aaa'
					this.pattern.buttonColor = '#fff'
				} else {
					this.pattern.iconColor = '#fff'
					this.pattern.buttonColor = '#007AFF'
				}
			},
			getListChapter() {
				this.chapterList = []

				this.$api.getNoteChapterList({
					'compilationId': this.compilationId,
					'pageSize': 9999
				}).then((res) => {
					this.recursionChapterInfo(res.rows.slice().reverse())
				})
				this.$api.getNotQuoteChapter(this.compilationId).then(res => {
					this.notQuoteNotes = []
					this.recursionNotQuoteChapter(res.data)
				})
			},
			recursionNotQuoteChapter(notQuoteChapters) {
				if (notQuoteChapters.length === 0) {
					return
				}
				const step = notQuoteChapters.pop()
				this.$api.getNoteByNoteId(step.noteId).then(res => {
					let note = res.data
					this.notQuoteNotes.push(step)
					if (note.content) {
						note.content = this.$common.dealRichTextImg(Base64.decode(note.content))
						note.content = this.$common.dealRichTextTagP(note.content)
					}
					step.note = note
					this.recursionNotQuoteChapter(notQuoteChapters)
				})
			},
			recursionChapterInfo(chapters) {
				if (chapters.length === 0) {
					return
				}
				const chapter = chapters.pop()
				chapter.noteList = []
				this.chapterList.push(chapter)
				this.recursionStepInfo(chapter.zoneCompilationSteps.slice().reverse(), chapter)
				this.recursionChapterInfo(chapters)
			},
			recursionStepInfo(row, chapter) {
				if (row.length === 0) {
					return
				}
				const pop = row.pop()

				this.getNoteCurrent(pop.noteId).then((e1 => {
					let resNote = e1.data
					// console.log(resNote)
					// resNote.content = resNote.content ? Base64.decode(resNote.content) : null
					if (resNote.content) {
						resNote.content = this.$common.dealRichTextImg(Base64.decode(resNote.content))
						resNote.content = this.$common.dealRichTextTagP(resNote.content)
					}
					pop.note = resNote
					chapter.noteList.push(pop)
					this.recursionStepInfo(row, chapter)
				}))
			},
			getNoteCurrent(id) {
				return this.$api.getNoteByNoteId(id)
			},
			navigateToHandle(id) {
				console.info(id)
				// uni.pageScrollTo({
				// 	selector:"#"+id,
				// 	fail:function(e){
				// 		console.info("失败了")
				// 	}
				// });
				//滚动到指定的区域
				uni.createSelectorQuery().select("#" + id).boundingClientRect((res) => {
					console.log(res)
					const scrollH = res.top;
					uni.pageScrollTo({
						duration: 1000, // 过渡时间
						scrollTop: scrollH, // 滚动的实际距离
					})
				}).exec()
			}

		}
	}
</script>

<style>
	.fui-section__title {
		margin-left: 32rpx;
	}

	.fui-list__item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.fui-item__img-box {
		position: relative;
		margin-right: 24rpx;
	}

	.fui-item__img {

		display: block;
	}

	/deep/ .cell-item-hd {
		display: table-cell;
		vertical-align: middle;
		min-width: 80%;
		max-width: 80%;
		font-size: 28upx;
		position: relative;
	}

	/deep/ .cell-item {
		padding: 11px 30px 11px 0;
	}

	.cell-item-hd-min {
		display: table-cell;
		vertical-align: middle;
		min-width: 160upx;
		font-size: 18upx;
		position: relative;
	}

	.cell-item-min {
		padding: 10upx 6upx 10upx 0;
		width: 724upx;
		margin-left: 26upx;
		border-bottom: 2upx solid #f3f3f3;
		position: relative;
		overflow: hidden;
		background-color: #fff;
		color: #333;
		display: table;
		min-height: 40upx;
	}
</style>